<template>
  <div>
    <!-- 页面标题区域 -->
    <div class="page-header">
      <div class="header-left">
        <h2>提现手续费设置</h2>
        <div class="description">管理经销商和区域代理的提现手续费</div>
      </div>
    </div>

    <!-- 手续费设置表格 -->
    <div class="margin-top">
      <el-table
        :data="feeConfigList"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column label="通道类型" width="200">
          <template #default="scope">
            <el-tag :color="scope.row.name === 'withdrawal_fee_usdt' ? '#409eff' : '#67c23a'" style="color: #ffffff; font-weight: 600">
              {{ scope.row.name }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="当前手续费" width="200">
          <template #default="scope">
            <span>{{ scope.row.value }}%</span>
          </template>
        </el-table-column>

        <el-table-column label="说明">
          <template #default="scope">
            <span>{{ scope.row.mark }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="editFeeConfig(scope.row)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑手续费对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="编辑手续费"
      width="500px"
    >
      <el-form :model="editForm" label-width="120px">
        <el-form-item label="通道类型:">
          <el-input v-model="editForm.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="手续费率(%):">
          <el-input-number
            v-model="editForm.namevalue"
            :min="0"
            :max="100"
            :precision="2"
            controls-position="right"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveFeeConfig" :loading="saveLoading">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { setSysConfigListAndEditApi } from '@/api/index'

  const loading = ref(false)
  const saveLoading = ref(false)
  const dialogVisible = ref(false)

  // 手续费配置列表
  const feeConfigList = ref()

  // 编辑表单
  const editForm = reactive({
    id: '',
    name: '',
    namevalue: ''
  })

  // 获取手续费配置
  const getFeeConfig = async () => {
    try {
      loading.value = true
      const res = await setSysConfigListAndEditApi({
        method: 'list'
      })
      feeConfigList.value = res.data
    } catch (error) {
      ElMessage.error('获取手续费配置失败')
    } finally {
      loading.value = false
    }
  }

  // 编辑手续费配置
  const editFeeConfig = (row: any) => {
    editForm.id = row.id
    editForm.name = row.mark
    editForm.namevalue = row.value
    console.log(editForm)
    dialogVisible.value = true
  }

  // 保存手续费配置
  const saveFeeConfig = async () => {
    try {
      saveLoading.value = true

      await setSysConfigListAndEditApi({
        method: 'edit',
        id: editForm.id,
        namevalue: editForm.namevalue
      })

      ElMessage.success('手续费设置保存成功')
      dialogVisible.value = false
      await getFeeConfig()
    } catch (error) {
      ElMessage.error('保存手续费设置失败')
    } finally {
      saveLoading.value = false
    }
  }

  onMounted(() => {
    getFeeConfig()
  })
</script>

<style lang="scss" scoped>
  $primary: #3498db;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    background-color: white;
    padding: 20px 24px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  }

  .page-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
  }

  .description {
    color: #7f8c8d;
    font-size: 14px;
    margin-top: 4px;
  }

  .margin-top {
    margin-top: 20px;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
</style>
